<template>
  <view class="container">
   <!-- <view class="auth-header">
      <view class="auth-logo">
        <u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar>
      </view>
    </view> -->
    <view class="header">
      <view style="color: #C4AD8C;text-align: right;padding-right: 20px;padding-top: 20px;" @click="$u.route('/pages/login/index')">随便看看</view>

    </view>

    <view class="auth-box">


      <u-gap height="40"></u-gap>

      <!-- 登录表单 -->
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
        <u-form-item label="" prop="" labelWidth="60" >
         <view style="font-size: 24px;font-weight: bold;margin: 50px 0;">欢迎登录</view>
        </u-form-item>

        <u-form-item label="账号" prop="username" labelWidth="60" borderBottom ref="item-mobile" left-icon="../../static/images/user/username.png">
          <u-input type="text"  v-model="formData.username" clearable placeholder="请输入用户名" border="none"></u-input>
        </u-form-item>

        <u-gap height="20"></u-gap>

        <u-form-item v-if="currentModeIndex === 0" label="密码" prop="password" labelWidth="60" borderBottom ref="item-password" left-icon="../../static/images/user/password.png">
          <u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请输入密码" border="none">
            <template slot="suffix">
              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom>
          <u--input type="number" maxlength="4" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
          <u-button slot="right" @tap="getCode" :text="codeTips" type="success" size="mini" :disabled="codeDisabled"></u-button>
          <u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code>
        </u-form-item>

        <view class="btn-group">
          <u-button class="auth-btn" type="primary" customStyle="margin-top: 50px;background:#182044;border-color:#182044;color:#C4AD8C;" @click="handleSubmit">登录</u-button>
        </view>
      <!--  <view style="display: flex;justify-content: flex-end;margin:20px 0">
            <text>没有账号?</text>
            <text style="color: red;">立即注册</text>
        </view> -->
      </u--form>
    </view>
  </view>
</template>

<script>
import { sendSmsCode } from '../../api/auth'
import { getLink,socialLogin } from "@/api/user.js";
export default {
  data() {
    return {
      currentModeIndex: 0,
      loginModeList: ['密码登录', '验证码登录'],
      inputType: 'password',
      codeDisabled: false,
      codeTips: '',
      formData: {
        username: '',
        password: '',
        code: ''
      },
      rules: {
        username: [
          {
            type: 'string',
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.username(value)
            },
            message: '请输入用户名',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ],
        password: {
          type: 'string',
          min: 4,
          max: 16,
          required: true,
          message: '密码长度4-16位密码',
          trigger: ['blur', 'change']
        },
        code: {
          type: 'integer',
          len: 4,
          required: true,
          message: '请填写4位验证码',
          trigger: ['blur', 'change']
        }
      }
    }
  },
  onLoad(options) {
    // 微信授权被绑定
    if(options.socialCode){
      this.formData.socialCode = options.socialCode;
      this.formData.socialState = options.socialState
      this.formData.socialType = options.socialType
    }
    //  // #ifdef H5
    // if(!options.code){
    //       // let url = location.href.slice(0, location.href.indexOf("#"));
    //       // console.log("url",url)
    //       // 1. 路径不能带端口号
    //       // # 号问题要注意, 项目最好是history 模式
    //       let url = 'www.baidu.com/?teachtId=111'
    //        let url = location.href
    //       getLink({type:31,redirectUri:url}).then(res=>{
    //           console.log("res",res.data)
    //           // location.href = res.data

    //       })
    // }else{
    //   // console.log("options",options)
    //       const code = options.code;
    //       const state = options.state;
    //       const type = 31;
    //       socialLogin({code,state,type}).then(res=>{
    //         console.log("111",res)
    //         this.$store.dispatch('Login', { type: 10, data:res.data }).then(res1 => {
    //           uni.$u.toast('登录成功')
    //           setTimeout(() => {
    //             uni.switchTab({
    //               url: '/pages/user/user'
    //             })
    //           }, 300)
    //         })

    //       }).catch(res=>{
    //         console.log("res",res)
    //         if(res.data.code = '1002000005'){
    //             this.formData.socialCode = code;
    //             this.formData.socialState = state;
    //             this.formData.socialType = type;
    //         }
    //       })

    // }
    //    // #endif
  },
  onReady() {
    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    handleModeChange(index) {
      if (index !== this.currentModeIndex) {
        this.currentModeIndex = index
        this.$refs.form.clearValidate()
      }
    },
    codeChange(text) {
      this.codeTips = text
    },
    getCode() {
      const mobile = this.formData.mobile
      if (!mobile) {
        uni.$u.toast('请填写手机号')
      } else if (!uni.$u.test.mobile(mobile)) {
        uni.$u.toast('手机号格式不正确')
      } else if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })

        //scene:1登陆获取验证码场景
        sendSmsCode({ mobile: mobile, scene: 1 }).then(res => {
          //console.log(res)
          uni.hideLoading()
          uni.$u.toast('验证码已发送')
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start()
        })
      } else {
        uni.$u.toast('倒计时结束后再发送')
      }
    },
    handleSubmit() {
      this.$refs.form.validate().then(res => {
         this.mobileLogin(this.formData)
        // uni.login({
        //   provider: 'weixin',
        //   success: res => {
        //     let data = this.formData
        //     data.socialType = 34 //WECHAT_MINI_APP 先指定固定值
        //     data.socialCode = res.code
        //     data.socialState = Math.random() // 该参数没有实际意义暂时传随机数
        //     this.mobileLogin(data)
        //   },
        //   fail: res => {
        //     this.mobileLogin(this.formData)
        //   }
        // })
      })
    },
    mobileLogin(data){
      console.log('login')
      this.$store.dispatch('Login', { type: this.currentModeIndex, data: data }).then(res => {
        uni.$u.toast('登录成功')
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/user/user'
          })
        }, 300)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-header {
  height: 400rpx;
  @include flex-center;
  .auth-logo {
    @include flex-center(column);
  }
}

.auth-box {
  @include flex-center(column);

  .mode-section {
    width: 600rpx;
    .subsection {
      height: 60rpx;
    }
  }
  .btn-group {
    width: 600rpx;
    .auth-btn {
      height: 90rpx;
      font-size: 32rpx;
    }
  }
}
</style>
